import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getTypes } from '../../actions/types.action';
import { SGbooks,SGsearch,SGincreasePv } from '../../actions/beforepage.action';
import logo from '../../assets/imgs/logo.jpg';
import indexDef from '../../assets/imgs/timdg.jpg';

@connect(mapStateToProps,mapDispatchToProps)
export default class BeforePage extends Component {
	componentDidMount(){
		this.props.TypesList();
		this.props.BeforeBooks();
	}
	sear(){
		let value=this.refs.key.value;
		if (!value) {
			this.refs.key.focus();
			return};
		this.props.Search({key:'name', value});
	}
	render(){
		let {
			types,
			books,
			IncreasePv
		} = this.props;
		return (
			<div className="site">
				<nav>
					<div className="medcont">
						<img src={logo} alt="logo" width={108} height={36} className="fl" />
						<div className="sear-con">
							<div onClick={this.sear.bind(this)} className="iconfont icon-search"></div>
							<input onKeyUp={(e)=>{if(e.keyCode===13)this.sear()}} className="inpt ease3 sear-key" type="text" ref="key" placeholder="查询电子书" />
						</div>
						<a href="#/login" className="gotoadmin fr ease3" target="_blank">
							<i className="iconfont icon-upload"></i>
							上传电子书
						</a>	
					</div>	
				</nav>
				<div className="types-cont">
					<div className="medcont">
						<b className="fl" style={{marginTop:6}}>分类：</b>
						<div className="types">
							{
								types
								.concat([{name:'全部',id:0}])
								.reverse()
								.map((tp,i)=>{
									return <div key={i} onClick={(e)=>{document.querySelector('.typed').className='dib ease3';e.target.className+=' typed';this.props.Search({key:'typesName',value:tp.name})}} className={"dib ease3"+(i===0?' typed':'')}>{tp.name}</div>
								})
							}
						</div>	
					</div>
				</div>
				<div className="medcont books">
					{
						books.length?
						books.map((bk,i)=><Book IncreasePv={IncreasePv} book={bk} key={i} />):
						<NoBK/>
					}
				</div>
			</div>
		);
	}
}
function mapStateToProps(state) {
	return {
		types: state.Types.types.reverse(),
		books: state.BeforeBooks
	}
}
function mapDispatchToProps(dispatch){
	return {
		TypesList: data => dispatch(getTypes(data)),
		BeforeBooks: () => dispatch(SGbooks()),
		Search: data => dispatch(SGsearch(data)),
		IncreasePv: data => dispatch(SGincreasePv(data))
	}
}
function NoBK(){
	return <div style={{textAlign: 'center',lineHeight: '100px',color: '#787878'}}>
		暂无该类电子书，你可以<a href="#/login" style={{color: '#03A9F4',paddingLeft: 3}} target="_blank">上传试试</a>
	</div>
}
function Book(props){
	let {book,IncreasePv} = props;
	return (
		<a href={book.index+(book.isMdpage==='1'?'/'+book.version:'')} target="_blank" className="book fl" onClick={
			()=>{
				IncreasePv({parentId:book.parentId||'', id:book.id});
			}
		}>
			<img className="ease3" src={!book.logo||book.logo==='undefined'?indexDef:book.logo} alt={book.title}/>
			<div className="title ease3">
				<p className="p1 nobr">{book.name}</p>
				<p className="p2 ease3">{book.desc}</p>
			</div>
			<div className="info">
				<div className="iconfont icon-weibiaoti1 fl"></div>
				<span className="fl author">{book.author}</span>
				<span className="fr pv">{book.pv}</span>
				<div className="fr iconfont icon-fire"></div>
			</div>
		</a>
	);
}